<!-- 结算中心 -->
<template>
  <div class="transaction_detail">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <span></span>
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-date-picker v-model="date" type="daterange" range-separator="~" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="searchDate" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="base" @change="searchBase" placeholder="请选择基地" clearable>
              <el-option v-for="(item, index) in baseOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="deal" @change="searchDeal" placeholder="请选择交易类型" clearable>
              <el-option v-for="(item, index) in dealOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="pay" @change="searchPay" placeholder="请选择支付类型" clearable>
              <el-option v-for="(item, index) in payOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="order" @change="searchOrder" placeholder="请选择订单类型" clearable>
              <el-option v-for="(item, index) in orderOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-autocomplete v-model="name" :fetch-suggestions="querySearchName" placeholder="请输入商品名称"
              @select="selectName" select-when-unmatched>
              <template #default="{ item }">
                <div>{{ item.productName }}<span style="color: #409eff;">&ensp;{{ item.skuName }}</span></div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <!-- <el-form-item>
            <el-select v-model="base" @change="searchBase" placeholder="请选择基地" clearable>
              <el-option
                v-for="(item, index) in baseOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item>
            <el-input
              v-model="number"
              @keyup[native].enter="searchNumber"
              @change="searchNumber"
              placeholder="交易号、订单号"
              :suffix-icon="Search"
              clearable
            />
          </el-form-item> -->
        </el-form>
      </div>
      <el-row>
        <el-col v-for="(item, index) in moneyList" :key="index" :span="8">
          <div class="td_money_item">
            <div class="tdm_title">{{ item.label }}</div>
            <h2>{{ item.total }}</h2>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="base_main_header">
        <el-button type="primary" text>导出</el-button>
      </div> -->
      <div class="base_main_header">
        <el-button type="primary" text @click="exportData">导出</el-button>
      </div>
      <div class="base_main_margin_top">
        <DataCollectTable :data="data" :total="total" :config="config" @operationsHander="opHander.receive">
        </DataCollectTable>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import DataCollectTable from "@com/table/DataCollectTable.vue";
import {
  OP_KEY,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import { $msg, $box } from "@ui/msg";
import { ref, reactive, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import useRoute from "@util/router";
import api from "@api/finance";
import configApi from "@api/config"
import $ from "@util/base";

const route = useRoute();

route.watchRouter("transactiondetail", () => {
  getData();
  getMoney();
});

const dealOptions = ref([
  { label: "收入", value: "1" },
  { label: "退款", value: "2" },
]);

const orderOptions = ref([
  { label: "商品", value: "1017001" },
  { label: "旅行", value: "1017002" },
  { label: "酒店", value: "1017003" },
  { label: "礼包", value: "1017004" },
]);

const payOptions = ref([
  { label: "微信支付", value: "1021001" },
  { label: "储值卡支付", value: "1021002" }
])
const baseOptions = ref([]);

getConfig();
function getConfig() {
  api.base((val) => {
    baseOptions.value = val;
  });
}

const deal = ref(route.query().deal || "");
const order = ref(route.query().order || "");
const pay = ref(route.query().pay || "");
const base = ref(route.query().base || "");
// const number = ref(route.query().number || "");
const date = ref(route.query().date || []);

const data = ref([]);
const total = ref(0);

function querySearchName(queryString, cd) {
  configApi.sku(queryString, (val) => {
    cd(val)
  })
}
const name = ref('')

function transactionOperations(data) {
  return [OPERATIONS.check];
}

const config = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 120,
    operations: transactionOperations,
  },
  column: [
    {
      label: "交易号",
      prop: "transactionNo",
    },
    {
      label: "产品信息",
      prop: "productInfo",
      width: 150,
    },
    {
      label: "金额（元）",
      prop: "transactionMoney",
      width: 110,
    },
    {
      label: "关联订单",
      prop: "orderCode",
      width: 150,
    },
    {
      label: "支付单号",
      prop: "mainOrderCode",
      width: 150,
    },
    {
      label: "订单类型",
      prop: "mainBusiType",
      width: 90,
    },
    {
      label: "储值抵扣金额（元）",
      prop: "changeMoney",
      width: 100,
    },
    {
      label: "支付方式",
      prop: "payType",
      width: 100,
    },
    {
      label: "交易类型",
      prop: "transactionType",
      width: 100,
    },
    {
      label: "归属基地",
      prop: "shopName",
      width: 110,
    },
    // {
    //   label: "归属基地",
    //   prop: "a7",
    //   width: 100,
    // },
    // {
    //   label: "交易状态",
    //   prop: "a8",
    //   width: 100,
    // },
    {
      label: "交易时间",
      prop: "createTime",
      width: 150,
    },
    {
      label: "分销员",
      prop: "agentMemberName",
      width: 90,
    },
  ],
};

const opHander = operationsHander();
opHander.install(OP_KEY.check, (data) => {
  route.push({
    name: "detailsview",
    query: { code: data.mainOrderCode },
  });
});

function searchDeal(val) {
  route.replaceQuery("deal", val);
}
function searchOrder(val) {
  route.replaceQuery("order", val);
}
function searchPay(val) {
  route.replaceQuery("pay", val);
}
function searchBase(val) {
  route.replaceQuery("base", val);
}
// function searchNumber(val) {
//   console.log(val);
//   route.replaceQuery("number", val);
// }

function searchDate(val) {
  route.replaceQuery("date", val);
}
function selectName(val) {
  route.replaceQuerys([{
    replaceKey: "sku",
    val: val.itemCode
  }, {
    replaceKey: "type",
    val: val.itemType
  }])
}

getData();
getMoney();
function getData() {
  let routeQuery = route.query();
  api.list(
    {
      transactionType: routeQuery.deal,
      mainBusiType: routeQuery.order,
      payType: routeQuery.pay,
      base: routeQuery.base,
      sku: routeQuery.sku,
      type: routeQuery.type,
      date: routeQuery.date,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      total.value = val.total;
      data.value = val.list.map((e) => {
        switch (e.mainBusiType) {
          case "1017001":
            e.mainBusiType = "商品";
            break;
          case "1017002":
            e.mainBusiType = "旅行";
            break;
          case "1017003":
            e.mainBusiType = "酒店";
            break;
          case "1017004":
            e.mainBusiType = "礼包";
            break;
        }
        switch (e.transactionType) {
          case 1:
            e.transactionType = "收入";
            break;
          case 2:
            e.transactionType = "退款";
            break;
        }
        switch (e.payType) {
          case "1021001":
            e.payType = "微信支付";
            break
          case "1021002":
            e.payType = "储值支付";
            break
        }
        return e;
      });
    }
  );
}

const moneyList = reactive([
  {
    label: "总交易额(元)",
    total: 0,
  },
  {
    label: "退款金额(元)",
    total: 0,
  },
  {
    label: "当前余额(元)",
    total: 0,
  },
]);

function getMoney() {
  let routeQuery = route.query();
  api.num({
    transactionType: routeQuery.deal,
    mainBusiType: routeQuery.order,
    payType: routeQuery.pay,
    base: routeQuery.base,
    sku: routeQuery.sku,
    type: routeQuery.type,
    date: routeQuery.date,
    page: routeQuery.p,
    size: routeQuery.s,
  },
    (val) => {
      moneyData(val);
    });
}

function moneyData(val) {
  moneyList.forEach((e, i) => {
    e.total = val[i];
  });
}

function exportData() {
  let routeQuery = route.query()
  api.exportData({
    transactionType: routeQuery.deal,
    mainBusiType: routeQuery.order,
    payType: routeQuery.pay,
    // loginName: routeQuery.base,
    // loginName: routeQuery.number,
    date: routeQuery.date,
  }, val => {
    $.download(val.url, "商品列表导出")
  })
}
</script>

<style lang="scss">
.transaction_detail {
  .td_money_item {
    text-align: center;
    border: solid 1px $border;
    border-right: none;

    &:last-child {
      border-right: solid 1px $border;
    }

    .tdm_title {
      height: 50px;
      line-height: 50px;
      border-bottom: solid 1px $border;
      background-color: $background;
    }

    h2 {
      margin: 0;
      height: 80px;
      line-height: 80px;
    }
  }
}
</style>
